<template>
	<view>
		<view class="uni-flex uni-column">
			<view class="uni-flex uni-row uni-flex-item">
				<view class="uni-flex uni-column uni-flex-item" style="align-items: center;">
					<text class="uni-flex-item">{{service.name}}</text>
					<text class="uni-flex-item">{{service.type}}</text>
					<text class="uni-flex-item">{{service.desc}}</text>
				</view>
				<view class="uni-flex-item uni-text" style="align-self: center;text-align: center;">
					<text>{{service.price}}</text>
				</view>
			</view>
			<view class="uni-flex-item" style="align-self: center;">
				<image v-bind:src="service.logoUrl" mode="aspectFit"></image>
			</view>
			<!-- 			<radio-group class="uni-flex-item">
				<view class="uni-flex uni-row">
					<label class="uni-flex-item" v-for="(pet, index) in pets" :key="pet.value">
						<view style="text-align: center;">
							<radio v-bind:value=pet.id.toString() :checked="index === current" />
							<text>{{pet.name}}</text>
						</view>
					</label>
				</view>
			</radio-group> -->
			<view class="uni-flex uni-row uni-flex-item" style="bottom: 0rpx;position: fixed;height: 90rpx;">
				<view class="uni-flex-item" style="align-self: center;">
					<text>{{service.price}}</text>
				</view>
				<view class="uni-flex-item" style="position: fixed;right: 0rpx; background-color: #FF3333;">
					<button type="primary">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		serviceExchange
	} from '../../common/dataExchange.js';

	export default {
		data() {
			return {
				service: {},
				pets: [],
				current: 0
			}
		},
		methods: {
			
		},
		onLoad: function(data) {
			// 获取服务
			uni.request({
				url: this.baseUrl + '/service/getById?id=' + data.serviceId,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					var service = res.data.data;
					this.service = serviceExchange(service);
				},
				fail: () => {},
				complete: () => {}
			});

		}
	}
</script>

<style>

</style>
